<template>
  <div class="specifySocket">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>跟换&指定Socket</span>
      </div>
      <div class="input-suffix">
        <span>{{ $t('eqpName') }}</span>
        <el-select v-model="value" placeholder="请选择" clearable @change="change">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <!-- 表单部分 -->
      <el-table v-if="show" :data="tableData" style="width: 100%">
        <el-table-column type="index" label="Site"/>
        <el-table-column label="Socket">
          <template slot-scope="scope">
            <el-select v-model="selectValuel" placeholder="请选择" clearable @change="change">
              <el-option
                v-for="item in scope.row"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
export default {
  name: 'SpecifySocket',
  data() {
    return {
      value: '',
      selectValuel: ' ',
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        }
      ],
      tableData: [],
      show: false // 选中展示对应表格数据
    }
  },
  methods: {
    // 下拉框改变
    change() {
      if (this.value) {
        this.show = true
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.box-card {
  width: 1050px;
  margin: 0 auto;
}
</style>
